<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>左右切换显示图片</title>
    <link rel="stylesheet" type=text/css href="js/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type=text/css href="js/simple-line-icons/simple-line-icons.min.css" />
    <link rel="stylesheet" type=text/css href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type=text/css href="css/bidirection-switch.css" />
    <script type="text/javascript" src="js/jquery.min..js"></script>
    <script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="col-md-12 bidirection-switch">
        <div class="arrow go-prev">
            <a href="#">
                <i class="fa fa-chevron-left"></i>
            </a>
        </div>

        <ul class="nav navbar-nav" id="ulDiv">
            <li class="active nav-item">
                <a href="#gwbl" data-toggle="tab">
                    <img class="nav-fa gwbl" src="images/gwbl.png" alt="">
                    <span class="title">公文办理</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#jstx" data-toggle="tab">
                    <img class="nav-fa jstx" src="images/jstx.png" alt="">
                    <span class="title">通知公告</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#szjm" data-toggle="tab">
                    <img class="nav-fa szjm" src="images/szjm.png" alt="">
                    <span class="title">督察督办</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#tzgg" data-toggle="tab">
                    <img class="nav-fa tzgg" src="images/tzgg.png" alt="">
                    <span class="title">资料交换</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#xzsp" data-toggle="tab">
                    <img class="nav-fa xzsp" src="images/xzsp.png" alt="">
                    <span class="title">短信平台</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#zwap" data-toggle="tab">
                    <img class="nav-fa zwap" src="/images/zwap.png" alt="">
                    <span class="title">邮件</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#zxzj" data-toggle="tab">
                    <img class="nav-fa zxzj" src="/images/zxzj.png" alt="">
                    <span class="title">专项资金</span>
                </a>
            </li>
        </ul>

        <div class="arrow go-next">
            <a href="#">
                <i class="fa fa-chevron-right"></i>
            </a>
        </div>
    </div>


    <script type="text/javascript">
        $(function () {

            //进入主页默认打开公文办理系统下的代办事项
            var testLength = $("#ulDiv  >li").length;
            if (testLength > 3) {
                //隐藏左方的箭头
                $(".fa-chevron-left").addClass("hide");
                //初始化操作
                for (var i = 0; i < testLength - 3; i++) {
                    var sumer = 3 + i;
                    $("#ulDiv").find("li").eq(sumer).addClass("hide");
                }
            } else {
                $(".fa-chevron-left").addClass("hide");
                $(".fa-chevron-right").addClass("hide");
            }
            //点击右箭头时
            var clickNumber = 0;
            $(".fa-chevron-right").on("click", function () {
                clickNumber += 1;
                //每次点击显示出11条数据
                for (var i = 0; i < 3; i++) {
                    //每点击一次，则隐藏当前li元素
                    var hideNumber = (clickNumber - 1) * 3 + i;
                    $("#ulDiv").find("li").eq(hideNumber).addClass("hide");
                    //对应的显示出这一次的点击数据
                    var openNumber = clickNumber * 3 + i;
                    var panduanNumbers = $("#ulDiv").find("li").eq(openNumber).removeClass("hide");
                    //当所有数据到顶的时候操作
                    if (panduanNumbers.length == 0) {
                        $(".fa-chevron-right").addClass("hide");
                    }
                    $(".fa-chevron-left").removeClass("hide");
                }
            })
            // 点击左箭头
            $(".fa-chevron-left").on("click", function () {

                for (var i = 0; i < 3; i++) {
                    var hideNumber = clickNumber * 3 + i;
                    $("#ulDiv").find("li").eq(hideNumber).addClass("hide");
                    var openNumber = clickNumber * 3 - 1 - i;
                    $("#ulDiv").find("li").eq(openNumber).removeClass("hide");
                }
                clickNumber -= 1;
                $(".fa-chevron-right").removeClass("hide");
                if (clickNumber == 0) {
                    $(".fa-chevron-left").addClass("hide");
                    $(".fa-chevron-right").removeClass("hide");
                }
            })
        })
    </script>
</body>

</html>